<section class="m-4 md:m-8" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container p-4 mx-auto my-6 space-y-1 text-center">
		<span class="text-xs font-semibold tracking-wider uppercase" [ngClass]="['text' + primary]">
			shortcut to your dream ui
		</span>
		<h2 class="pb-3 text-3xl font-bold md:text-4xl">Create a stylish website in minutes</h2>
		<p class="">
			Get a jumpstart to creating your new webpage! With our fully responsive and carefully
			styled components you can get the structure of your website done with just a couple of
			clicks.
		</p>
	</div>
	<div class="container grid justify-center gap-4 mx-auto lg:grid-cols-2 xl:grid-cols-4">
		<div class="flex flex-col px-8 py-6">
			<h2
				class="mb-2 text-lg font-semibold sm:text-xl title-font"
				[ngClass]="['text' + defaultInv]"
			>
				Components
			</h2>
			<p class="flex-1 mb-4 text-base leading-relaxed" [ngClass]="['text' + plainInv]">
				Individual components that can be re-used multiple times in your designs.
			</p>
			<a
				class="inline-flex items-center space-x-2 text-sm"
				[routerLink]="['/components']"
				[ngClass]="['text' + primary]"
			>
				<span>Learn More</span>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					class="w-4 h-4"
				>
					<path
						fill-rule="evenodd"
						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</div>
		<div class="flex flex-col px-8 py-6 lg:border-none xl:border-solid">
			<h2
				class="mb-2 text-lg font-semibold sm:text-xl title-font"
				[ngClass]="['text' + defaultInv]"
			>
				Sections
			</h2>
			<p class="flex-1 mb-4 text-base leading-relaxed" [ngClass]="['text' + plainInv]">
				Pre-made building blocks that you can stack on top of each other like Legos to build
				a website of your own in minutes.
			</p>
			<a
				class="inline-flex items-center space-x-2 text-sm"
				[routerLink]="['/sections']"
				[ngClass]="['text' + primary]"
			>
				<span>Learn More</span>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					class="w-4 h-4"
				>
					<path
						fill-rule="evenodd"
						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</div>
		<div class="flex flex-col px-8 py-6">
			<h2
				class="mb-2 text-lg font-semibold sm:text-xl title-font"
				[ngClass]="['text' + defaultInv]"
			>
				Templates
			</h2>
			<p class="flex-1 mb-4 text-base leading-relaxed" [ngClass]="['text' + plainInv]">
				Full pages that showcase pieces of what you can achieve with the building blocks
				that are in this UI kit.
			</p>
			<a
				class="inline-flex items-center space-x-2 text-sm"
				[routerLink]="['/templates']"
				[ngClass]="['text' + primary]"
			>
				<span>Learn More</span>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					class="w-4 h-4"
				>
					<path
						fill-rule="evenodd"
						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</div>
		<div class="flex flex-col px-8 py-6">
			<h2
				class="mb-2 text-lg font-semibold sm:text-xl title-font"
				[ngClass]="['text' + defaultInv]"
			>
				Customization
			</h2>
			<p class="flex-1 mb-4 text-base leading-relaxed" [ngClass]="['text' + plainInv]">
				Choose your primary color from any of the Tailwind CSS 2.0 colors. You can also view
				all of the components in our light and dark themes.
			</p>
			<a
				class="inline-flex items-center space-x-2 text-sm"
				[routerLink]="['/docs']"
				[ngClass]="['text' + primary]"
			>
				<span>Learn More</span>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 20 20"
					fill="currentColor"
					class="w-4 h-4"
				>
					<path
						fill-rule="evenodd"
						d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</div>
	</div>
</section>
